﻿@{
    ViewBag.Title = "Add Tabs (with client-side constructed HTML) and Remove Tabs";
}

<h2>Add Tabs (with client-side constructed HTML) and Remove Tabs</h2>

<h3>Sample</h3>

@{
    Html.Telerik().TabStrip()
        .Name("SampleTabStrip")
        .Items(tabstrip =>
        {
            tabstrip.Add()
                .Text("Tab 1")
                .Selected(true)
                .Content(
                    @<text>
                    <p>Content for the first tab.</p>
                    </text>
                );
            tabstrip.Add()
                .Text("Tab 2")
                .Content(
                    @<text>
                    <p>Content for the second tab.</p>
                    </text>
                );
        })
        .Render();
}

<br />

<div style="height:100px; width:100%;">
    <fieldset style="width:400px; float:left; margin-right:10px;"><legend>Add Tab</legend>
        <br />
        New Tab Name: @Html.TextBox("newTabName")
        <button onclick="addTab()">Add</button>
    </fieldset>

    <fieldset style="width:400px; float:left;"><legend>Remove Tab by Text</legend>
        <br />
        Tab to Remove: <select id="tabList"><option value="Tab 1">Tab 1</option><option value="Tab 2">Tab 2</option></select>
        <button onclick="removeTabByText()">Remove</button>
    </fieldset>

    <fieldset style="width:400px; float:left;"><legend>Remove Tab by Index</legend>
        <br />
        Tab to Remove: <select id="tabListByIndex"><option value="0">Tab 1</option><option value="1">Tab 2</option></select>
        <button onclick="removeTabByIndex()">Remove</button>
    </fieldset>
</div>

<h3>Documentation</h3>
<p>
When the HTML is passed into the addTab() function, a tab is created and the HTML is displayed as the tab contents.  To do this, set the
following 2 attributes in the json object parameter:
<ul>
    <li>text: text for the tab.</li>
    <li>html: html for the tab content.</li>
</ul>
To see the addTab() function load a partial view, look at: <a href="@Url.Content("~/TabStrip/LoadTabs")" style="color:Blue;">Add Tabs (with Partial View retrieved from server) and Remove Tabs</a>
</p>
<p>
Here is the code that constructs the HTML, adds the tab and adds the tab name to the dropdownlist of tabs:
</p>
<pre class="code">
var tabName = $('#newTabName').val();

var $span = $('<span/>').append('Content for the ' + tabName + ' tab');
var tabStrip = $('#SampleTabStrip').data('tTabStrip');
tabStrip.addTab({ text: tabName, html: $span[0] });
tabStrip.selectTab({ text: tabName });
$('#tabList').append($('<option></option>').val(tabName).html(tabName));
</pre>

<p>
When the tab is removed, the removeTab() function is called to remove the tab.  The removeTab() function
takes a json object as the parameter where one of the 2 attributes must be set.  The attributes are:
<ul>
    <li>text: the current text for the tab.</li>
    <li>index: zero based index for the tab.</li>
</ul>
</p>
<p>
Here is the code that removes the tab and removes the tab name from the dropdownlist of tabs:
</p>
<pre class="code">
var tabName = $('#tabList option:selected').val();
var tabStrip = $('#SampleTabStrip').data('tTabStrip');
tabStrip.removeTab({ text: tabName });
if (tabStrip.getTab({ text: tabName }).length == 0) {
    $('#tabList option:selected').remove();
}
</pre>

<script type="text/javascript">
    closeTab = function (idx) {
        $('#SampleTabStrip').data('tTabStrip').removeTab({ index: idx });
    }

    addTab = function () {
        var tabName = $('#newTabName').val();

        if (tabName.length > 0) {
            var $span = $('<span/>').append('Content for the ' + tabName + ' tab');
            var tabStrip = $('#SampleTabStrip').data('tTabStrip');
            tabStrip.addTab({ text: tabName, html: $span[0] });
            tabStrip.selectTab({ text: tabName });
            $('#tabList').append($('<option></option>').val(tabName).html(tabName));
        }
        else {
            alert('Enter the text for the new tab');
        }
    }
    removeTabByText = function () {
        var tabName = $('#tabList option:selected').val();
        var tabStrip = $('#SampleTabStrip').data('tTabStrip');
        tabStrip.removeTab({ text: tabName });
        if (tabStrip.getTab({ text: tabName }).length == 0) {
            $('#tabList option:selected').remove();
        }
    }

    removeTabByIndex = function () {
        var tabIndex = $('#tabListByIndex option:selected').val();
        var tabStrip = $('#SampleTabStrip').data('tTabStrip');
        tabStrip.removeTab({ index: tabIndex });
        if (tabStrip.getTab({ index: tabIndex }).length == 0) {
            $('#tabListByIndex option:selected').remove();
        }
    }
</script>
